<script setup>
import {ref, toRefs, defineProps} from "vue";

const props = defineProps({
  options: {
    type: Array,
    default: []
  },
  modelValue: {
    type: Array,
    default: []
  },
  label: {
    type: String,
    default: ''
  },
})
const emit = defineEmits(['update:modelValue'])
const {modelValue} = toRefs(props)
const checkList = ref([])
checkList.value = modelValue.value

const activeHandle = (val) =>{
  if(checkList.value.includes(val)){
    checkList.value = checkList.value.filter(item => item !== val)
  } else {
    checkList.value.push(val)
  }
  emit('update:modelValue', checkList.value)
}
</script>

<template>
<div class="c-radio">
  <div class="left" v-if="label">
    <span>{{label}}</span>
  </div>
  <div class="right">
    <template v-for="item in options">
      <span :class="[{active: modelValue.includes(item.value)}]" @click="activeHandle(item.value)">{{item.label}}</span>
    </template>
  </div>

</div>
</template>

<style scoped lang="scss">
.c-radio{
  display: flex;
  .left{
    width: 5vw;
    text-align: center;
    span{
      height: 3vh;
      line-height: 3vh;
      font-weight: 500;
    }
  }
  .right{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    span{
      width: 5vw;
      display: inline-block;
      margin-right: 1vh;
      margin-bottom: 1vh;
      height: 3vh;
      line-height: 3vh;
      cursor: pointer;
      text-align: center;
      border-radius: 4px;
      &.active,&:hover{
        color: #FFFFFF;
        background-color: #df1212;
      }
    }
  }

}
</style>
